<template>
    <div class="page_container_card_box">
        <div class="page_container_card_list">
            <div v-for="(item, index) in data" :key="index" :id="item.title" class="page_container_card_item">
                <div class="page_container_card_title" v-fade-in>{{ item.title }}</div>

                <div v-html="item.contant" class="page_container_card_content" v-if="item.contant != void (0)" v-fade-in>
                </div>

                <div v-for="(i, ii) in item.sonList" :key="ii" class="page_container_card_content"
                    v-if="item.sonList && item.sonList.length > 0" v-fade-in>
                    <div class="page_container_card_son_title">{{ i.title }}</div>
                    <div v-html="i.contant"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})
</script>

<style lang='less'>
@import "./style.less";
</style>